<!-- Dom模板 -->
<template>
  <div class="kehu">
    <!-- Dom内容 -->
    <div class="kehus">
      <div class="kehus-shang">
        <ul class="kehus-shang-left">
          <li>
            <p>手机号</p>
            <input type="text" placeholder="请输入手机号" v-model="shou" />
          </li>
          <li>
            <p>用户等级</p>
            <el-select v-model="value" placeholder="全部" class="sel">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                :style="{ 'text-align': 'center' }"
              ></el-option>
            </el-select>
          </li>
          <li>
            <p>标签</p>
            <el-select v-model="values" placeholder="全部" class="sel1">
              <el-option
                v-for="item in option"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                :style="{ 'text-align': 'center' }"
              ></el-option>
            </el-select>
          </li>
        </ul>
        <div class="kehus-shang-right">
          <button @click="chaxun">查询</button>
          <button @click="chong">重置</button>
          <button @click="exportE">本页导出</button>
          <button @click="exportExcel">全部导出</button>
        </div>
      </div>
      <div class="kehus-zhong">
        <Liebiao
          :list="$store.state.client.data"
          :table-config="tableConfig"
          @Particulars="handleClick"
        />
      </div>
      <div class="kehus-xia">
        <Fenye
          :pageData="$store.state.client.list"
          :handleSizeChange="handleSizeChange"
          :handleCurrentChange="handleCurrentChange"
          :num="num"
        />
      </div>
    </div>
    <router-view />
  </div>
</template>

<script>
// import request from "../../request/index";
// import a from './a'; // 引入组件
import FileSaver from "file-saver";
import XLSX from "xlsx";
import Fenye from "./fen/index";
import Liebiao from "./fen/indexs";

export default {
  name: "",
  components: {
    Fenye,
    Liebiao,
  },
  data() {
    return {
      // msg: "测试",
      options: [
        {
          value: "V1",
          label: "V1",
        },
        {
          value: "V2",
          label: "V2",
        },
        {
          value: "V3",
          label: "V3",
        },
        {
          value: "V4",
          label: "V4",
        },
        {
          value: "V5",
          label: "V5",
        },
      ],
      value: "",
      option: [
        {
          value: "-",
          label: "-",
        },
        {
          value: "黑名单",
          label: "黑名单",
        },
      ],
      values: "",
      currentPage: 1,
      num: 5,
      shou: "",
      excelData: [],
      tableConfig: {
        style: "width:100%;",
        config: [
          {
            label: "用户ID",
            prop: "id",
          },
          {
            label: "用户姓名",
            prop: "name",
          },
          {
            label: "手机号",
            prop: "user",
          },
          {
            label: "用户等级",
            prop: "dengji",
          },
          {
            label: "用户积分",
            prop: "jifen",
          },
          {
            label: "标签",
            prop: "biaoqian",
          },
          {
            label: "操作",
            shown: true,
            isEdit: false,
            isDel: false,
            isParticulars: true,
            isUndercarriage: false,
          },
        ],
      },
    };
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created() {
    this.$store.dispatch("client/user");
  },
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {},
  // Vue方法定义
  methods: {
    handleSizeChange(val) {
      this.num = val;
      this.$store.commit("client/jiequ", {
        id: this.currentPage,
        ids: this.num,
      });
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.currentPage = val;
      this.$store.commit("client/jiequ", {
        id: this.currentPage,
        ids: this.num,
      });
    },
    chaxun() {
      //验证手机号格式
      let arrs = /^1[3-9][0-9]{9}$/;
      if (this.shou !== "" && !arrs.test(this.shou)) {
        this.$message({
          message: "请输入正确的手机号",
          duration: 1500,
        });
      } else {
        this.$store.commit("client/chaxun", {
          shou: this.shou,
          deng: this.value,
          biao: this.values,
          num: this.num,
        });
      }
    },
    chong() {
      this.shou = "";
      this.value = "";
      this.values = "";
      this.currentPage = 1;
      this.num = 5;
      this.$store.commit("client/chong");
    },
    handleClick(data) {
      console.log(111);
      this.$router.push({
        name: "Xiang",
        params: {
          id: data.id,
        },
      });
    },
    //定义导出Excel表格事件
    exportE() {
      this.$confirm("此操作将导出本页excel文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.excelData = this.$store.state.client.data; //你要导出的数据list。
          this.export2Excel();
        })
        .catch(() => {});
    },
    exportExcel() {
      this.$confirm("此操作将导出全部excel文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.excelData = this.$store.state.client.user; //你要导出的数据list。
          this.export2Excel();
        })
        .catch(() => {});
    },
    export2Excel() {
      var that = this;
      require.ensure([], () => {
        const { export_json_to_excel } = require("./excal/Export2Excel"); //这里必须使用绝对路径，根据自己的命名和路径
        const tHeader = ["id", "姓名", "手机号", "用户等级", "积分", "标签"]; // 导出的表头名
        const filterVal = ["id", "name", "shou", "dengji", "jifen", "biaoqian"]; // 导出的表头字段名
        const list = that.excelData;
        // that.excelData为传入的数据
        const data = that.formatJson(filterVal, list);
        export_json_to_excel(tHeader, data, `excel`); // 导出的表格名称，根据需要自己命名
        // tHeader为导出Excel表头名称，`xxxxxx`即为导出Excel名称
      });
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) => filterVal.map((j) => v[j]));
    },
  },
};
</script>

<style scoped>
/* @import url(''); 引入css类 */
* {
  margin: 0;
  padding: 0;
  list-style: none;
}
.kehu {
  width: 90%;
  height: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: relative;
  font-size: 13px;
}
.kehus {
  width: 96%;
  height: 96%;
}
.kehus-shang {
  width: 100%;
  height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.kehus-shang-left {
  width: 70%;
  height: 100%;
  display: flex;
  align-items: center;
}
.kehus-shang-left li {
  margin-right: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.kehus-shang-left li p {
  font-size: 13px;
  margin-right: 10px;
}
.kehus-shang-left li input {
  width: 120px;
  height: 30px;
  border: none;
  outline: none;
  border: 1px solid #ccc;
  border-radius: 5px;
  text-indent: 1em;
}
.kehus-shang-left >>> .el-input__inner {
  width: 100px;
  height: 30px;
  min-width: 100px;
  min-width: 40px;
  font-size: 13px;
}
.el-input__icon {
  height: 30px;
}
.kehus-shang-right {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: right;
}
.kehus-shang-right button {
  width: 80px;
  height: 35px;
  margin-left: 20px;
  border: none;
  outline: none;
  border-radius: 20px;
  background-color: white;
}
.kehus-shang-right button:nth-child(1) {
  background-color: #3ca1ff;
  color: white;
}
.kehus-zhong {
  width: 100%;
  /* height: calc(100% - 120px); */
}
.kehus-xia {
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: right;
}
</style>
<style>
.sel .el-input__suffix .el-input__suffix-inner .el-input__icon {
  line-height: 0px;
}
.sel1 .el-input__suffix .el-input__suffix-inner .el-input__icon {
  line-height: 0px;
}
</style>